<template>
  <div>
    <el-dialog title="编辑安装点" :visible.sync="dialogVisible" width="500px" :before-close="closeEditDialog"
      :close-on-click-modal="false" :modal-append-to-body="false">
      <el-form :model="editInfo" :rules="rules" ref="refEditInfo" label-width="100px">
        <el-form-item size="small" label="安装点名称" placeholder="请输入" prop="name">
          <el-input clearable v-model="editInfo.name"></el-input>
        </el-form-item>
        <!-- <el-form-item size="small" label="">
          <el-button icon="el-icon-map-location" @click="openMap">地图选点</el-button>
        </el-form-item>
        <el-form-item size="small" label="地区" prop="provinceCityAreaValue">
          <v-distpicker :province="editInfo.province" :city="editInfo.city" :area="editInfo.area"
            @province="getProvince" @city="getCity" @area="getArea"></v-distpicker>
        </el-form-item>
        <el-form-item size="small" label="详细地址" prop="address">
          <el-input type="textarea" :rows="2" placeholder="请输入详细地址" v-model="editInfo.address"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" class="confirm-button" @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="mapLoc" v-if="isShowMap">
      <!-- 嵌入的界面 -->
      <iframe :src="reqUrl" v-if="isShowMap" frameborder="0" class="iframe" seamless scrolling="no"></iframe>
    </div>
  </div>
</template>

<script>
import { reqUpdate } from "@/api/api";

export default {
  name: "editTeacherMemebr",
  props: ["getLocationInfo"],
  data() {
    const validatorLocation = (rule, value, callback) => {
      if (
        !this.editInfo.province ||
        this.editInfo.province == "省" ||
        !this.editInfo.city ||
        this.editInfo.city == "市" ||
        !this.editInfo.area ||
        this.editInfo.area == "区"
      ) {
        callback(new Error("请选择省市区"));
      }
    };
    return {
      dialogVisible: false,
      editInfo: {
        name: "",
        buildingType: "2",
      },
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入安装点名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        provinceCityAreaValue: [
          {
            required: true,
            validator: validatorLocation,
            message: "请选择省市区",
            trigger: ["blur", "change"],
          },
        ],
      },
      reqUrl:
        "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      isShowMap: false,
    };
  },
  watch: {
    getLocationInfo: {
      handler(val) {
        // console.log(val, "val")
        this.editInfo.name = val.name;
        this.editInfo.lat = val.lat;
        this.editInfo.lng = val.lng;
        this.editInfo.address = val.address;
        this.editInfo.id = val.id;
        this.editInfo.isDefence = val.isDefence;
        this.isShowMap = false;
      },
      deep: true,
    },
  },
  methods: {
    openMap() {
      // 显示地图
      this.isShowMap = true;
    },
    // 新版省市区获取
    getProvince(data) {
      this.editInfo.province = data.value;
    },
    getCity(data) {
      this.editInfo.city = data.value;
    },
    getArea(data) {
      this.editInfo.area = data.value;
    },

    // 点击修改
    editSubmit() {
      this.$refs.refEditInfo.validate(async (valid) => {
        if (valid) {
          const res = await reqUpdate(this.editInfo);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("编辑安装点成功");
          this.dialogVisible = false;
          this.$parent.getreqParkList();
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refEditInfo.resetFields();
      // this.selectedProvinceCityArea = [];
      this.dialogVisible = false;
    },
  },
  deactivated() {
    if (this.$refs.refEditInfo != null) {
      this.closeEditDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/common.less");

.mapLoc {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;

  .iframe {
    width: 100%;
    height: 100%;
  }
}
</style>